<script setup lang="ts">
import CrudPage from "@/components/CrudPage/index.vue";
import {
  createSysUser,
  getSysUserList,
  updateSysUser,
  SysUser
} from "../../api/sysUser";

import { ref } from "vue";
import { useSysUserProvider } from "./provider";
import SplitPane, { ContextProps } from "@/components/ReSplitPane";
import SysRoleList from "../sysRole/components/SysRoleList.vue";

const query = ref<Record<string, any>>({});
const { columns } = useSysUserProvider();

const onShouldLoadData = async (
  pgs: any
): Promise<{ list: any[]; total: number }> => {
  const { data } = await getSysUserList(pgs);
  return { list: data.list, total: data.total };
};
</script>

<template>
  <div>
    <SplitPane
      :split-set="{
        minPercent: 10,
        defaultPercent: 20,
        split: 'vertical'
      }"
    >
      <template #paneL>
        <SysRoleList />
      </template>
      <template #paneR>
        <CrudPage
          title=""
          row-key="id"
          :create="{
            viewType: 'drawer',
            labelPosition: 'top',
            rowProps: { gutter: 20 }
          }"
          :edit="{
            viewType: 'drawer',
            labelPosition: 'top',
            rowProps: { gutter: 20 }
          }"
          :columns="columns"
          child-field="children"
          :get-data-list="onShouldLoadData"
          @edit-confirm="updateSysUser"
          @create-confirm="createSysUser"
        >
          <template #operation="{ row, edit }">
            <el-button type="text" @click="edit(row)">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </CrudPage>
      </template>
    </SplitPane>
  </div>
</template>
<style lang="scss" scoped></style>
